﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Scroll.aspx.cs" Inherits="Web.jQuery_Plugin_Demo.Scroll" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Centent-Type" content="text/html; charset=UTF-8" />
  <title></title>

  <script type="text/javascript" src="../js/jquery.js"></script>

  <style type="text/css">
    body { 
      height: 3000px;
      
    }
    
    div div {
      width: 200px;
      height: 200px;
      float: left;
    }
    
    .color-bewitchedTree {
      background-color: #1EC8AE;
    }
    
    .color-mysticalGreen {
      background-color: #92C9BE;
    }
    
    .color-lightHeartBlue {
      background-color: #A6EDE6;
    }
    
    .color-glassGall {
      background-color: #C3ECEF;
    }
    
    .color-sillyFizz {
      background-color: #BAF1D3;
    }
    
    .color-brainSand { 
      background-color: #D8D3B7;
    }
    
    .color-mustardAddigted { 
      background-color: #D3B97C;
    }
    
    .color-magicPowder { 
      background-color: #EBCEB3;
    }
    
    .color-trueBlush { 
      background-color: #F2ACA2;
    }
    
    .color-merryCranesbill { 
      background-color: #F9616F;
    }
  </style>

  <script type="text/javascript">
    $(function () {

      var $sidebar = $("#content-nav"),
	        $window = $(window),
	        offset = $sidebar.offset(),
	        topPadding = 15;

      $window.scroll(function () {
        if ($window.scrollTop() > offset.top) {
          $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
          });
        } else {
          $sidebar.stop().animate({
            marginTop: 0
          });
        }
      });
    });
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <div class="color-bewitchedTree"></div>
    <div class="color-mysticalGreen"></div>
    <div class="color-lightHeartBlue"></div>
    <div class="color-glassGall"></div>
    <div class="color-sillyFizz"></div>
    <div class="color-brainSand"></div>
    <div class="color-mustardAddigted"></div>
    <div class="color-magicPowder"></div>
    <div class="color-trueBlush"></div>
    <div id="content-nav" class="color-merryCranesbill"></div>
  </div>
  </form>
</body>
</html>
